/*
 * 管理端样式
 * 自动同步时间: 2025/7/24 23:01:00
 * 源文件: shared\markdown-styles.css
 */

/**
 * 统一的 Markdown 样式文件
 * 适用于管理端和小程序端的一致性显示
 * 
 * 设计原则:
 * - 响应式设计，支持不同屏幕尺寸
 * - 专业的代码高亮效果
 * - 良好的阅读体验
 * - 统一的视觉风格
 */

/* ===== 基础样式 ===== */
.md-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 100%;
  word-wrap: break-word;
}

/* ===== 标题样式 ===== */
.md-heading {
  margin: 1.5em 0 0.8em 0;
  font-weight: 600;
  line-height: 1.25;
  color: #1a1a1a;
}

.md-h1 {
  font-size: 2em;
  border-bottom: 3px solid #4a90e2;
  padding-bottom: 0.5em;
  margin-top: 0;
}

.md-h2 {
  font-size: 1.5em;
  border-bottom: 2px solid #6bb6ff;
  padding-bottom: 0.3em;
}

.md-h3 {
  font-size: 1.25em;
  color: #2c3e50;
}

.md-h4 {
  font-size: 1.1em;
  color: #34495e;
}

.md-h5 {
  font-size: 1em;
  color: #5d6d7e;
}

.md-h6 {
  font-size: 0.9em;
  color: #6c757d;
}

/* ===== 段落样式 ===== */
.md-paragraph {
  margin: 1em 0;
  line-height: 1.7;
  color: #333;
}

/* ===== 列表样式 ===== */
.md-unordered-list,
.md-ordered-list {
  margin: 1em 0;
  padding-left: 2em;
}

.md-list-item {
  margin: 0.5em 0;
  line-height: 1.6;
}

.md-unordered-list .md-list-item {
  list-style-type: disc;
}

.md-ordered-list .md-list-item {
  list-style-type: decimal;
}

/* ===== 链接样式 ===== */
.md-link {
  color: #4a90e2;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.md-link:hover {
  color: #357abd;
  border-bottom-color: #357abd;
}

/* ===== 图片样式 ===== */
.md-image {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===== 引用块样式 ===== */
.md-blockquote {
  margin: 1.5em 0;
  padding: 1em 1.5em;
  background-color: #f8f9fa;
  border-left: 4px solid #4a90e2;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #5a6c7d;
  position: relative;
}

.md-blockquote::before {
  content: '"';
  font-size: 3em;
  color: #4a90e2;
  position: absolute;
  top: -0.2em;
  left: 0.3em;
  opacity: 0.3;
}

/* ===== 内联代码样式 ===== */
.md-inline-code {
  background-color: #f1f3f4;
  color: #d73a49;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 0.9em;
  font-weight: 500;
}

/* ===== 代码块样式 ===== */
.md-code-block {
  margin: 1.5em 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  background: #1e1e1e;
}

.md-language-label {
  position: absolute;
  top: 12px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #888;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.md-pre {
  margin: 0;
  padding: 2.5em 1.5em 1.5em 1.5em;
  background: #1e1e1e;
  overflow-x: auto;
  position: relative;
}

/* macOS 风格窗口按钮 */
.md-pre::before {
  content: "";
  display: block;
  position: absolute;
  top: 16px;
  left: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ff5f56;
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
  z-index: 1;
}

.md-code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #d4d4d4;
  background: none;
  display: block;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  tab-size: 4;
}

/* ===== Prism.js 语法高亮颜色 - VS Code Dark+ 主题 ===== */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6a9955;
  font-style: italic;
}

.token.punctuation {
  color: #cccccc;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #b5cea8;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #ce9178;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #d4d4d4;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #569cd6;
}

.token.function,
.token.class-name {
  color: #dcdcaa;
}

.token.regex,
.token.important,
.token.variable {
  color: #9cdcfe;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

/* ===== 表格样式 ===== */
.md-table-wrapper {
  margin: 1.5em 0;
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font-size: 14px;
}

.md-table-header {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid #e9ecef;
}

.md-table-cell {
  padding: 12px 16px;
  border-bottom: 1px solid #e9ecef;
  color: #495057;
}

.md-table-row:hover {
  background-color: #f8f9fa;
}

/* ===== 分割线样式 ===== */
.md-divider {
  margin: 2em 0;
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, #4a90e2, transparent);
}

/* ===== 文本样式 ===== */
.md-strong {
  font-weight: 600;
  color: #2c3e50;
}

.md-em {
  font-style: italic;
  color: #5a6c7d;
}

.md-del {
  text-decoration: line-through;
  color: #6c757d;
  opacity: 0.7;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
  .md-h1 { font-size: 1.8em; }
  .md-h2 { font-size: 1.4em; }
  .md-h3 { font-size: 1.2em; }

  .md-code-block {
    margin: 1em -1em;
    border-radius: 0;
  }

  .md-pre {
    padding: 2em 1em 1em 1em;
  }

  .md-table-wrapper {
    margin: 1em -1em;
    border-radius: 0;
  }

  .md-blockquote {
    margin: 1em -0.5em;
    padding: 1em;
  }
}

/* ===== 打印样式 ===== */
@media print {
  .md-code-block {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .md-pre::before {
    display: none;
  }

  .md-language-label {
    display: none;
  }

  .md-link {
    color: #000;
    text-decoration: underline;
  }
}
